import { Component, ElementRef, OnInit } from '@angular/core';
import { PlayLppService } from '../play-lpp.service';


@Component({
  selector: 'app-img-img',
  templateUrl: './img-img.component.html',
  styleUrls: ['./img-img.component.scss']
})
export class ImgImgComponent {
  a: boolean = true;
  b: boolean = true;
  suiji:boolean = true;
  suiji_btn = document.getElementById('panel_1');
  img_value1 ?:number;
  img_value2 ?:number;
  img_value3 ?:number;
  img_value4 ?:number;
  img_value5 ?:number;
  img_value6 ?:number;
  img_value7 ?:number;
  img_value8 ?:number;
  img_value9 ?:number;
  MyString:any[]=[];
  img_src:string = "";
  nzMarks = {
    
    1: '1%',
    25: '25%',
    50: '50%',
    75: '75%',
    100: '100%',

  };
  nzMarks2 = {
    
    0: '0.0',

    2: '2.0',

  };
  nzMarks3 = {
    
    0: '0.00',

    1: '1.00',

  };
  options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' }
  ];  
  options1 = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' }
  ];
  options_cyq = [
    { value: 'option1', label: 'Euler A' },
    { value: 'option2', label: 'Euler' },
    { value: 'option3', label: 'Ddim' },
    { value: 'option3', label: 'Ddim 2 M' },
    { value: 'option3', label: 'Ddim 2 M Karras' },
    { value: 'option3', label: 'Dpm Sde' },
    { value: 'option3', label: 'Dpm Sde Karras' },
  ];
  selectedOption: string = '';
  switchValue1: boolean=false;

  constructor(private elementRef: ElementRef,public lppServ : PlayLppService ) {
    // const chooseImage = document.getElementById('input_img') as HTMLInputElement;

    // const imgAvatar = document.getElementById('img-avatar') as HTMLImageElement;
    // if (chooseImage) {
    //   let img_src = this.img_src;
    //   chooseImage.addEventListener('change', function img_() {
    //     const filePath = chooseImage.value; // 获取到input的value，里面是文件的路径
    //     const fileFormat = filePath.substring(filePath.lastIndexOf('.')).toLowerCase(); // 获取文件后缀
      
    //     const file = chooseImage.files?.[0]; // 使用可选链运算符处理可能为null的情况
    //     if (!file) {
    //       return;
    //     }
      
    //     const src = URL.createObjectURL(file); // 转成可以在本地预览的格式
      
    //     // 检查是否是图片
    //     if (!fileFormat.match(/.png|.jpg|.jpeg|.bmp|.gif/)) {
    //       // error_prompt_alert
    //       alert('上传错误，文件格式必须为：png/jpg/jpeg/bmp/gif');
    //       chooseImage.value = ''; // 清空文件选择
    //       img_src="";
    //       return;
    //     }
    //     img_src =src
    //     imgAvatar.src = src; // 将图片地址放置在img的src中。
    //   });
    //   this.img_src = img_src
    // }

  }    
  ngOnInit() {
    this.lppServ.choose()
  }
  onOptionChange(value: string) {
    this.selectedOption = value;
  }



  inputimg(){
    const that =this
    const imgAvatar = document.getElementById("imgAvatar")as HTMLImageElement;
    if (!imgAvatar) {
      console.error("无法找到'img-avatar'元素");
      return;
    }
    const input = document.getElementById('input_img')as HTMLInputElement;
    input.click();
    input.addEventListener('change', function img_() {
        const filePath = input.value; // 获取到input的value，里面是文件的路径
        const fileFormat = filePath.substring(filePath.lastIndexOf('.')).toLowerCase(); // 获取文件后缀
      
        const file = input.files?.[0]; // 使用可选链运算符处理可能为null的情况
        if (!file) {
          return;
        }
      
        const src = URL.createObjectURL(file); // 转成可以在本地预览的格式
      
        // 检查是否是图片
        if (!fileFormat.match(/.png|.jpg|.jpeg|.bmp|.gif/)) {
          // error_prompt_alert
          alert('上传错误，文件格式必须为：png/jpg/jpeg/bmp/gif');
          input.value = ''; // 清空文件选择
          that.img_src="";
          return;
        }
        that.img_src =src
        imgAvatar.src = src; // 将图片地址放置在img的src中。
        console.log(imgAvatar.src);
        
      });
  }
  showbutton(){
    const imgAvatar = document.getElementById("imgAvatar")as HTMLImageElement;
    const input = document.getElementById('input_img')as HTMLInputElement;
    input.value = ''; 
    this.img_src = ""
    imgAvatar.src = ""
  }


  open() {
    opener = document.getElementById('001');

    if (this.a) {
      opener.classList.add('Section_555');
      this.a = false;
    } else {
      opener.classList.remove('Section_555');
      this.a = true;
    }
    console.log(this.a);
  }
  
  open_1() {
      const  opener = document.getElementById('002')as HTMLBRElement
      const  tatle = document.getElementById('Section_2-5_tatle')as HTMLBRElement
      const height_box = document.querySelector('.height_box')as HTMLBRElement

    if (this.a) {
      opener.style.height = ((opener.offsetHeight) + (tatle.offsetHeight)+ (height_box.offsetHeight + 40)) + 'px';
      opener.classList.add('Section_2-55');
      this.a = false;
    } else {
      opener.style.height = "20px";
      opener.classList.remove('Section_2-55');
      this.a = true;
    }

    // if (this.a) {
    //   opener.classList.add('Section_2-55');
    //   this.a = false;
    // } else {
    //   opener.classList.remove('Section_2-55');
    //   this.a = true;
    // }
    // console.log(this.a);
  }
  open_2() {
    opener = document.getElementById('003');

    if (this.a) {
      opener.classList.add('Section_444');
      this.a = false;
    } else {
      opener.classList.remove('Section_444');
      this.a = true;
    }
    console.log(this.a);
  }
  clicksuiji() {
    const dui = document.getElementById('dui');
  
    if (dui !== null) {
      this.suiji = !this.suiji;
      if (this.suiji === false) {
        dui.style.backgroundColor = "#ffffff";
      }else{
        dui.style.backgroundColor = "#2334ce";
      }
    }
  }
  getMyString(){
    const iimg_file=document.getElementById("input_img")as HTMLInputElement
    const String_Object = {
      V1:this.img_value1,
      V2:this.img_value2,
      V3:this.img_value3,
      V4:this.img_value4,
      V5:this.img_value5,
      V6:this.img_value6,
      V7:this.img_value7,
      V8:this.img_value8,
      V9:this.img_value9,
      switchValue1:this.switchValue1,
      src:this.img_src,
      proportion : this.lppServ.the_proportion,
      width_heigth : this.lppServ.the_width_heigth,
      // S2:
    };
    this.MyString.push(String_Object)
    console.log(this.MyString);
    console.log(iimg_file.value)
    // console.log(this.img_src);
    
  }
  grow(){
    this.lppServ.clickDiv=true
    const height_box = document.querySelector('.height_box')as HTMLBRElement
    const box = document.querySelector('.Section_2-55')as HTMLBRElement
    // box.style.height = (box.offsetHeight + height_box.offsetHeight) + 'px';
  }
  line_width(new_width:HTMLSelectElement){

    console.log(new_width);
    
      // console.log(new_width.selectedIndex);
      // console.log(new_width.options[new_width.selectedIndex].value);
      
      
  }
}
